<template>
  <div class="container">
    <div class="container-content">
      <el-row :gutter="10">
        <el-col :span="4">
          <div class="card-container">
            <el-card :body-style="{ padding: '10px' }" shadow="never">
              <template #header>
                <span class="card-title">表单分类</span>
              </template>
              <div class="card-content-full">
                <el-tree
                  ref="docTreeRef"
                  accordion
                  :check-strictly="true"
                  class="custom-tree"
                  :data="treeOptions.dataList"
                  highlight-current
                  node-key="id"
                  :props="treeOptions.props"
                  :show-checkbox="false"
                  @node-click="handleNodeClick"
                />
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="20">
          <vab-query-form>
            <vab-query-form-top-panel>
              <el-form
                :inline="true"
                label-width="80px"
                :model="tableOptions.queryForm"
                style="width: 100%"
              >
                <el-row :gutter="10">
                  <el-col :span="5">
                    <el-form-item label="表单名称">
                      <el-input
                        v-model="tableOptions.queryForm.formName"
                        placeholder="表单名称"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item label="状态">
                      <DictSelect
                        v-model:default-value="
                          tableOptions.queryForm.formStatus
                        "
                        dict-code="1002"
                        show-all="Y"
                        @change="handleStatusChange"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item>
                      <el-button
                        icon="refresh-left"
                        type="warning"
                        @click="handleResetQuery"
                      >
                        重置
                      </el-button>
                      <el-button
                        icon="search"
                        type="primary"
                        @click="queryTableData"
                      >
                        查询
                      </el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </vab-query-form-top-panel>

            <vab-query-form-left-panel :span="24">
              <el-button
                v-auth="['flowformmanager/xz']"
                icon="circle-plus"
                type="primary"
                @click="handleAdd"
              >
                添加
              </el-button>
              <el-button
                v-auth="['flowformmanager/sc']"
                icon="remove"
                type="danger"
                @click="handleDelete"
              >
                批量删除
              </el-button>
            </vab-query-form-left-panel>
          </vab-query-form>

          <el-table
            ref="tableRef"
            v-loading="tableOptions.loading"
            border
            stripe
            :data="tableOptions.dataList"
            :height="tableOptions.height"
            :cell-style="tableStyle.cellStyle"
            :header-cell-style="tableStyle.headerCellStyle"
            @sort-change="handleSortChange"
            @selection-change="handleSelectionChange"
            @row-click="handleRowClick"
          >
            <el-table-column
              align="center"
              show-overflow-tooltip
              type="selection"
              width="55"
            />
            <el-table-column
              align="center"
              label="表单名称"
              prop="formName"
              show-overflow-tooltip
              width="180"
            />
            <el-table-column
              align="center"
              label="状态"
              prop="formStatusDesc"
              width="70"
            >
              <template #default="{ row }">
                <el-tag :type="row.formStatus === '0' ? 'success' : 'info'">
                  {{ row.formStatusDesc }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="表单设计"
              prop="formInfo"
              width="90"
            >
              <template #default="{ row }">
                <el-tag v-if="row.formInfo" type="success">已完成</el-tag>
                <el-tag v-else type="info">未完成</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="数据存储表"
              prop="tableName"
              show-overflow-tooltip
              width="160"
            >
              <template #default="{ row }">
                <el-tag v-if="row.storageType === '0'" type="success"
                  >默认表</el-tag
                >
                <el-tag v-else type="primary">{{ row.tableName }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="所属分类"
              prop="formTypeName"
              show-overflow-tooltip
              width="120"
            />
            <el-table-column
              align="center"
              label="备注"
              prop="formRemark"
              show-overflow-tooltip
              width="120"
            />
            <el-table-column
              align="center"
              label="创建人"
              prop="createUserName"
              width="100"
            />
            <el-table-column
              align="center"
              :formatter="datetimeFormat"
              label="创建时间"
              prop="createTime"
              width="160"
            />
            <el-table-column
              align="center"
              label="最后修改人"
              prop="updateUserName"
              width="100"
            />
            <el-table-column
              align="center"
              :formatter="datetimeFormat"
              label="最后修改时间"
              prop="updateTime"
              width="160"
            />
            <el-table-column
              align="center"
              border
              fixed="right"
              label="操作"
              width="280"
            >
              <template #default="{ row }">
                <el-button
                  v-auth="['flowformmanager/xg']"
                  size="small"
                  type="warning"
                  @click="handleEdit(row)"
                  >修改</el-button
                >
                <el-button
                  v-auth="['flowformmanager/xg']"
                  size="small"
                  type="danger"
                  @click="handleDelete(row)"
                  >禁用/启用</el-button
                >
                <el-button
                  v-auth="['flowformmanager/xg']"
                  size="small"
                  type="primary"
                  @click="handleDesign(row)"
                  >设计</el-button
                >
                <el-button
                  :disabled="row.formInfo ? false : true"
                  size="small"
                  type="success"
                  @click="handleRender(row)"
                >
                  预览
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            background
            :current-page="tableOptions.pagination.current"
            :layout="tableOptions.pagination.layout"
            :page-size="tableOptions.pagination.size"
            :total="tableOptions.pagination.total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </el-col>
      </el-row>
      <FormEdit ref="formEditRef" width="60%" @confirm="queryTableData" />
      <FormPreviewDialog ref="formPreviewDialogRef" width="60%" type="flow" />
      <CommonDialog
        v-model="designerVisible"
        :border="true"
        fullscreen
        :show-footer="false"
        :show-header="false"
        @closed="
          designerVisible = false;
          queryTableData();
        "
      >
        <FormDesignerPanel
          fullscreen
          v-model:formModel="formData"
          @closed="designerVisible = false"
        />
      </CommonDialog>
    </div>
  </div>
</template>

<script setup name="FlowFormManager">
import { useMessage, useMessageBox } from "@/hooks/message";
import { datetimeFormat } from "@/utils/common";
import { cloneObject } from "@/utils/common";
import FormPreviewDialog from "@/components/formPreviewDialog.vue";
import FormDesignerPanel from "@/views/design/form/FormDesignerPanel.vue";
import FormEdit from "./components/formEdit.vue";
import DictSelect from "@/components/dictSelect.vue";
import { queryFormTable, updateForm, deleteForm } from "@/api/flow/form";
import { querySystemTreeNode } from "@/api/admin/system/systemtree";
import { useTable } from "@/hooks/table";
import { useTree } from "@/hooks/tree";

const formEditRef = ref(null);
const formPreviewDialogRef = ref(null);
const docTreeRef = ref(null);
const tableRef = ref(null);
const designerVisible = ref(false);

const formData = ref({
  id: "",
  formName: "",
  formRemark: "",
  formStatus: "0",
  formInfo: "",
  formTypeId: "",
  formTypeCode: "",
  formTypeName: "",
  storageType: "0"
});

const tableOptions = reactive({
  queryForm: {
    formTypeCode: "ALL",
    formName: "",
    formStatus: "0"
  },
  autoLoad: true,
  queryFunction: queryFormTable,
  ascs: ["form_type_code", "form_name"]
});

const {
  tableStyle,
  queryTableData,
  handleSelectionChange,
  handleResetQuery,
  handleRowClick,
  handleSizeChange,
  handleCurrentChange,
  handleSortChange
} = useTable(tableOptions, tableRef);

const treeOptions = reactive({
  queryForm: { treeCode: "form" },
  props: {
    children: "children",
    label: "text"
  },
  queryFunction: querySystemTreeNode
});

const { queryTreeData } = useTree(treeOptions);

const handleNodeClick = data => {
  if (data.nodeCode) {
    tableOptions.queryForm.formTypeCode = data.nodeCode;
  }
  queryTableData();
};

const handleAdd = () => {
  formEditRef.value.show();
};

const handleEdit = row => {
  formEditRef.value.show(row);
};

const handleDesign = row => {
  cloneObject(formData.value, row);
  designerVisible.value = true;
};

const handleRender = row => {
  if (row.formInfo) {
    formPreviewDialogRef.value.show(row);
  } else {
    useMessage().warning("表单未完成设计,不能预览");
  }
};

const handleDelete = async row => {
  console.log(row);
  if (row && row.id) {
    const { code, msg } = await updateForm({
      id: row.id,
      formStatus: row.formStatus === "1" ? "0" : "1"
    });
    if (code === 200) {
      useMessage().success(msg);
      await queryTableData();
    } else {
      useMessage().warning(msg);
    }
  } else {
    if (tableOptions.dataSelections.length > 0) {
      const ids = tableOptions.dataSelections.map(item => item.id).join();
      useMessageBox()
        .confirm("删除的告警表单将无法恢复，是否继续")
        .then(async () => {
          const { code, msg } = await deleteForm(ids);
          if (code === 200) {
            useMessage().success(msg);
            await queryTableData();
          } else {
            useMessage().warning(msg);
          }
        });
    } else {
      useMessage().warning("未选中任何行");
    }
  }
};

const handleStatusChange = val => {
  tableOptions.queryForm.formStatus = val;
};
</script>

<style lang="scss" scoped></style>
